<template>
  <el-card>
    <div slot="header">
      <span>新建检查记录</span>
    </div>
    <el-alert
      title="不能同时检查更多人！"
      type="warning"
      show-icon
      :closable="false"
      v-if="records.length == maxRecords"
      style="margin-bottom:12px"
    ></el-alert>
    <el-alert
      :title="formData.client[1] + '已经在检查中！'"
      type="error"
      show-icon
      :closable="false"
      v-if="isDuplicate"
      style="margin-bottom:12px"
    ></el-alert>

    <el-form
      :model="formData"
      label-width="80px"
      v-if="records.length < maxRecords"
    >
      <el-form-item label="被检查人">
        <el-cascader
          :options="clientList"
          v-model="formData.client"
          placeholder="请选择人员"
          style="width:100%"
          filterable
          @change="formData.start = new Date()"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label="所在席位"
        v-if="formData.client.length === 2"
      >
        <el-cascader
          :options="positionList"
          v-model="formData.position"
          placeholder="请选择席位"
          style="width:100%"
          @change="formData.start = new Date()"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label="开始时间"
        v-if="formData.position.length != 0"
      >
        <el-time-picker
          v-model="formData.start"
          placeholder="请设置时间"
          style="width:100%"
        ></el-time-picker>
      </el-form-item>

      <el-form-item
        label="录入类型"
        v-if="formData.position.length != 0"
      >
        <el-radio-group v-model="formData.type">
          <el-radio :label="0">现场录入</el-radio>
          <el-radio :label="1">非现场录入</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="检查日期"
        v-if="formData.position.length != 0 && formData.type === 1"
      >
        <el-date-picker
          @change="handleDateChange"
          v-model="formData.date"
          align="right"
          type="date"
          placeholder="请设置日期"
          :picker-options="pickerOptions"
          format="yyyy-MM-dd"
          style="width:100%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="检查时长"
        v-if="formData.position.length != 0 && formData.type === 1"
      >
        <el-radio-group v-model="formData.duration">
          <el-radio :label="5">5分钟</el-radio>
          <el-radio :label="15">15分钟</el-radio>
          <el-radio :label="30">30分钟</el-radio>
          <el-radio :label="45">45分钟</el-radio>
          <el-radio :label="60">60分钟</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div
      style="text-align:center"
      v-if="formData.position.length != 0"
    >
      <el-button
        type="primary"
        style="width:15em;max-width:50%"
        @click="handleCreate()"
        :disabled="isDuplicate"
      >开始检查</el-button>
    </div>
  </el-card>
</template>

<script>
  import { mapState } from "vuex";
  export default {
    computed: {
      ...mapState({
        clientList: (state) => state.clientData.clientCascaderLite,
        clientData: (state) => state.clientData.clientList,
        clientRankList: (state) => state.clientData.clientRankList,
        records: (state) => state.record.inspect.liveRecord,
        positionList: (state) => state.statics.position,
        itemTree: (state) => state.inspectData.inspectItemTrees.live,
      }),
      maxRecords() {
        return 4;
      },
      isDuplicate() {
        for (let i = 0; i < this.records.length; i++) {
          if (this.records[i].clientName == this.formData.client[1]) {
            return true;
          }
        }
        return false;
      },
    },
    data() {
      return {
        formData: {
          client: [],
          position: [],
          start: new Date(),
          type: 0,
          duration: 30,
          date: new Date(),
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          }, ],
        },
      };
    },
    methods: {
      handleDateChange() {
        this.formData.start.setDate(this.formData.date.getDate());
        this.formData.start.setFullYear(this.formData.date.getFullYear());
        this.formData.start.setMonth(this.formData.date.getMonth());
      },
      handleCreate() {
        let categories = JSON.parse(JSON.stringify(this.itemTree));
        let c = this.findClient(this.formData.client[1]);
        let u = this.findClient(this.$store.state.login.userbase.name);
        if (
          !this.formData.start ||
          this.formData.start.getTime() > new Date().getTime()
        ) {
          this.formData.start = new Date();
        }
        this.$store.commit(
          "record/createLiveInspect",
          JSON.parse(
            JSON.stringify({
              clientName: c.name,
              clientGroup: c.clientGroup,
              clientOffice: c.clientOffice,
              clientRank: c.clientRank,
              categories: categories,
              seat: this.formData.position[0],
              sector: this.formData.position[1] ? this.formData.position[1] : "",
              begin: this.formData.start.getTime(),
              duration: this.formData.duration,
              time: this.formData.start.getTime(),
              userName: u.name,
              userGroup: u.clientGroup,
              userOffice: u.clientOffice,
              level: "一般",
              type: "现场",
              recordType: this.formData.type,
              status: 0,
            })
          )
        );
        // console.log(this.$store.state.record.inspect);
        this.resetContent();
        this.$emit("create");
      },

      resetContent() {
        this.formData = { client: [], position: [], start: new Date() };
      },
      findClient(clientName) {
        for (let i = 0; i < this.clientData.length; i++) {
          if (this.clientData[i].name == clientName) {
            return this.clientData[i];
          }
        }
        return false;
      },
    },
  };
</script>